<template>
  <el-form :model="form" label-width="auto">
    <div class="header-title">基本信息</div>
    <div class="w-1/2 pt-[10px] px-[10px]">
      <el-form-item label="项目名称：">
        <el-input v-model="form.productName" />
      </el-form-item>
      <el-form-item label="PMO:">
        <el-input v-model="form.pmoName" />
      </el-form-item>
      <el-form-item label="PD:">
        <el-input v-model="form.pdName" />
      </el-form-item>
    </div>

    <div class="header-title">开发</div>
    <ul class="pt-[10px] px-[10px]">
      <li
        class="border-b border-gray-200 py-[10px] first:pt-0"
        v-for="(item, index) in form.developer"
        :key="index"
      >
        <el-form-item label="开发平台:" class="w-[300px]">
          <el-select v-model="item.plateForm" placeholder="please select your zone">
            <el-option label="小程序" value="miniProgram" />
            <el-option label="IOS" value="ios" />
            <el-option label="安卓" value="android" />
          </el-select>
        </el-form-item>
        <ul>
          <li class="flex" v-for="(peopleItem, peopleIndex) in item.peopleList" :key="peopleIndex">
            <el-form-item label="开发人员:" class="w-[300px]">
              <el-input v-model="peopleItem.name" />
            </el-form-item>
            <el-form-item label="负责模块:" class="w-[400px]">
              <el-input v-model="peopleItem.module" />
            </el-form-item>
            <div class="ml-[10px]">
              <el-button type="primary" v-if="peopleIndex + 1 === item.peopleList.length"
                >添加</el-button
              >
              <el-button type="danger">删除</el-button>
            </div>
          </li>
        </ul>
      </li>
      <div class="flex justify-center mt-[20px]">
        <el-button type="primary" class="w-[100px]">添加</el-button>
      </div>
    </ul>

    <div class="header-title mt-[20px]">测试</div>
    <ul class="pt-[10px] px-[10px]">
      <li
        class="border-b border-gray-200 pt-[10px] first:pt-0"
        v-for="(item, index) in form.tester"
        :key="index"
      >
        <el-form-item label="测试人员:" class="w-[300px]">
          <el-input v-model="item.name" />
        </el-form-item>
        <div
          class="flex"
          v-for="(plateFormItem, plateFormIndex) in item.plateFormList"
          :key="plateFormIndex"
        >
          <el-form-item label="开发平台:" class="w-[300px]">
            <el-select v-model="plateFormItem.plateForm" placeholder="please select your zone">
              <el-option label="小程序" value="miniProgram" />
              <el-option label="IOS" value="ios" />
              <el-option label="安卓" value="android" />
            </el-select>
          </el-form-item>
          <el-form-item label="负责模块:" class="w-[400px]">
            <el-input v-model="plateFormItem.module" />
          </el-form-item>
          <div class="ml-[10px]">
            <el-button type="primary" v-if="plateFormIndex + 1 === item.plateFormList.length"
              >添加</el-button
            >
            <el-button type="danger">删除</el-button>
          </div>
        </div>
      </li>
      <div class="flex justify-center mt-[20px]">
        <el-button type="primary" class="w-[100px]">添加</el-button>
      </div>
    </ul>

    <div class="flex mt-[20px] justify-center">
      <el-button type="primary" @click="onSubmit" class="w-[200px]">提交</el-button>
    </div>
  </el-form>
</template>
<script lang="ts" setup>
import { ref } from "vue";
const form = ref({
  productName: "优鲜",
  pmoName: "张三",
  pdName: "罗岸林",
  // 开发
  developer: [
    {
      plateForm: "miniProgram",
      peopleList: [
        {
          name: "陈澎",
          module: ""
        },
        {
          name: "李阳阳",
          module: ""
        }
      ]
    },
    {
      plateForm: "ios",
      peopleList: [
        {
          name: "邓超",
          module: ""
        },
        {
          name: "冯文",
          module: ""
        }
      ]
    },
    {
      plateForm: "android",
      peopleList: [
        {
          name: "涂学刚",
          module: ""
        },
        {
          name: "周某某",
          module: ""
        }
      ]
    }
  ],
  // 测试
  tester: [
    {
      name: "黄柳柳",
      plateFormList: [
        {
          plateForm: "miniProgram",
          module: ""
        },
        {
          plateForm: "ios",
          module: ""
        },
        {
          plateForm: "android",
          module: ""
        }
      ]
    },
    {
      name: "黄柳柳",
      plateFormList: [
        {
          plateForm: "miniProgram",
          module: ""
        },
        {
          plateForm: "ios",
          module: ""
        },
        {
          plateForm: "android",
          module: ""
        }
      ]
    }
  ]
});
function onSubmit() {
  console.log(form.value);
}
</script>
